<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <ul>
            <li v-for = "skill in skills">
                {{ skill }}
            </li>
       </ul>
       <hr>

       <!-- index 为数组下标 ，下标从 0 开始，可以进行计算-->
       <ul>
           <li v-for="(person,index) in persons">
               {{ index + 1 }}. {{ person.name }} - {{ person.age }}
           </li>
       </ul>
       <hr>
       <!-- template 渲染元素 -->
       <template v-for="(person, index) in persons">
           <h3>{{ index }}. {{ person.name }}</h3>
           <p>Age:{{ person.age }}</p>
       </template>

       <hr>

       <!-- 对单个对象进行遍历 -->
       <template v-for="(person,index) in persons">
           <div v-for="(val,key) in person">
               {{ key }}—— {{ val }}
           </div>
       </template>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                skills:['css','HTML5','JavaScript','PHP'],
                persons:[
                    {
                        name:"张三",
                        age:25
                    }, {
                        name: "李四",
                        age: 50
                    }, {
                        name: "王五",
                        age: 38
                    },
                ]
            },
            methods:{
              
            },
            computed:{
                
            }
        })
    </script>
</body>
</html>